<!DOCTYPE html>
<html>

	<head>
		<base href="./" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="expires" content="0">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta name="format-detection" content="telephone=no, address=no, email=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<title>登录</title>
		<link rel="stylesheet" href="css/mui.min.css" type="text/css" charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8" />
		<style>
			body {
				background: url(img/login/loginBg.png) no-repeat;
				background-size: 100%
			}
			.title {
				font-size: 18px;
				margin-bottom: 0.57rem;
			}
			
			.mui-content {
				width: 100%;
				padding: 0 0.54rem;
				color: #fff;
				margin-top: 62%;
			}
			
			#forgetPassword {
				float: right;
				margin-top: 0.31rem;
				transform: scale(1, 1);
				-webkit-transform: scale(1, 1);
				-moz-transform: scale(1, 1);
			}
			
			#forgetPassword {
				font-size: 24px;
				position: relative
			}
			
			#forgetPassword:after {
				position: absolute;
				bottom: 0;
				right: 0;
				left: -0.02rem;
				width: 100%;
				height: 1px;
				content: '';
				background-color: #fff
			}
			
			@media screen and (max-width:375px) {
				#forgetPassword {
					font-size: 12px;
				}
			}
			
			@media screen and (min-width:376px) and (max-width:414px) {
				#forgetPassword {
					font-size: 14px;
				}
			}
			
			@media screen and (min-width:415px) and (max-width:639px) {
				#forgetPassword {
					font-size: 16px;
				}
			}
			
			@media screen and (min-width:640px) and (max-width:719px) {
				#forgetPassword {
					font-size: 18px;
				}
			}
			
			@media screen and (min-width:720px) and (max-width:749px) {
				#forgetPassword {
					font-size: 20px;
				}
			}
			
			@media screen and (min-width:750px) and (max-width:799px) {
				#forgetPassword {
					font-size: 24px;
				}
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<p class="title  colorWhite text-center">在乎经销商管理系统</p>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input type="text" class="mui-input-clear" id="account" placeholder="请输入用户名">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input type="password" class="mui-input-password" id="password" placeholder="请输入密码">
				</div>
				<div id="message" class="none transition">
					<label>用户名或者密码错误</label>
				</div>
				<div class="mui-button-row">
					<button type="button" class="mui-btn mui-btn-primary mui-btn-full" id="login" style="height:44px;border-color:#f1c40f;background:#f1c40f;color:#fff;">登录</button>
				</div>

				<label id="forgetPassword">忘记密码？</label>
			</form>
		</div>
	</body>
	<script src="js/resize.js"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/ajaxFun.js"></script>
	<!--<script type="text/javascript" src="js/update.js"></script>-->
	<script type="text/javascript" charset="utf-8">
		(function($, doc) {
			$.plusReady(function() {
				var curr = plus.webview.currentWebview();
				var wvs = plus.webview.all();
				for (var i = 0, len = wvs.length; i < len; i++) {
					//关闭除setting页面外的其他页面
					if (wvs[i].getURL() == curr.getURL()){
						continue;
					}
					plus.webview.close(wvs[i]);
				}
				
				var toMain = function() {
					//使用定时器的原因：
					//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
					var id = setInterval(function() {
						clearInterval(id);
						openWindow('app/home/index.html', 'homeIndex', {})
					}, 20);
				};
				//这里开始侦听事件了
				var loginButton = doc.getElementById('login');
				var accountBox = doc.getElementById('account');
				var passwordBox = doc.getElementById('password');
				var forgetButton = doc.getElementById('forgetPassword');
				loginButton.addEventListener('click', function(event) {
					var loginInfo = {
						userName: accountBox.value,
						password: passwordBox.value
					};
					app.login(loginInfo, function() {
						toMain();
					});
				})

				/*忘记密码事件*/
				forgetButton.addEventListener('click', function(event) {
					openWindow('forget_password.html', 'forget_password');
				}, false);

				var backButtonPress = 0;
				$.back = function(event) {
					backButtonPress++;
					if(backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				};

			})
		}(mui, document))
	</script>

</html>